<template>
  <div class="userIndex-container">
    <div class="login-box">
      <div class="login-form">
        <div class="login-title">江苏省重点目标作战要素采集系统</div>
        <div class="user">
          <div class="user-box">
            <div class="user-icon">
              <img class="login-uimage" src="@/assets/image/login/login-user-icon.png" alt="" />
            </div>
            <el-input v-model.trim="uName" size="large" placeholder="请输入账号"></el-input>
          </div>
        </div>
        <div class="password">
          <div class="user-box">
            <div class="user-icon">
              <img class="login-pimage" src="@/assets/image/login/login-pwd-icon.png" alt="" />
            </div>
            <el-input
              v-model.trim="pwd"
              class="login-pimage"
              type="password"
              size="large"
              placeholder="请输入密码"
            >
            </el-input>
          </div>
        </div>
        <div style="text-align: left; width: 100%; margin-left: 22%">
          <el-checkbox v-model="checked" style="color: #fff" @change="checkedClick"
            >记住密码</el-checkbox
          >
        </div>
        <div class="login-btn" @click="loginForm">
          <span>登&nbsp;&nbsp;&nbsp;录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { login } from '@/service/api'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const store = useLoginInfoStore()

const uName: any = ref('')
const pwd: any = ref('')
const checked = ref<any>(false)
onActivated(() => {
  sessionStorage.setItem('token', '')
  store.token = ''
})
function checkedClick(val: boolean) {
  checked.value = val
}
const router = useRouter()
/**
 * 登录提交事件
 */
onMounted(() => {
  if (localStorage.getItem('checked') && JSON.parse(localStorage.getItem('checked'))) {
    checked.value = true
    pwd.value = window.localStorage.getItem('passWord')
    uName.value = window.localStorage.getItem('userName')
  }
})
const loginForm = () => {
  if (!uName.value) {
    return ElMessage.warning('请输入账号')
  }
  if (!pwd.value) {
    return ElMessage.warning('请输入密码')
  }

  login({ username: uName.value, password: pwd.value })
    .then((res: any) => {
      ElMessage.success('登录成功')

      if (checked) {
        window.localStorage.setItem('checked', String(checked.value))
        window.localStorage.setItem('userName', uName.value)
        window.localStorage.setItem('passWord', pwd.value)
      } else {
        window.localStorage.removeItem('checked')
        window.localStorage.removeItem('userName')
        window.localStorage.removeItem('passWord')
      }

      store.jgId = res.userXfjgJyryInfo.sjszjgTywysbm
      window.localStorage.setItem('jgId', res.userXfjgJyryInfo.sjszjgTywysbm)
      window.sessionStorage.setItem('token', res.userAuthLoginResp.accessToken)
      window.localStorage.setItem('loginId', res.userAuthLoginResp.loginId)
      window.localStorage.setItem('userXfjgJyryInfo', JSON.stringify(res.userXfjgJyryInfo))
      router.push({ path: '/home' })
    })
    .catch(() => {
      ElMessage.error('账号或密码错误')
    })
}
</script>

<style lang="less" scoped>
.userIndex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/image/login/login-bck.jpg');
  background-size: 101% 101%;
  position: absolute;
  z-index: 11;

  .login-box {
    width: 660px;
    height: 340px;

    .login-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        width: 50px;
        height: 50px;
        background-image: url('../../assets/image/login/login-icon.png');
        background-size: 100% 100%;
      }

      h1 {
        text-align: center;
        font-size: 34px;
        font-weight: 700;
        color: #fff;
      }
    }

    .login-form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 660px;
      height: 400px;
      padding-top: 10px;
      background-image: url('../../assets/image/login/login-box-bck.png');
      background-size: 100% 100%;
      border-radius: 15px;
      margin: 15px auto 0;

      .el-input--large {
        width: 75%;
      }

      .login-title {
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        align-items: center;
        font-style: normal;
        font-size: 38px;
        padding: 0 15px 30px;
        color: rgba(255, 255, 255, 0.8);
      }

      .user {
        width: 80%;
        display: flex;
        align-items: center;
        margin: -15px 10px 20px;
        padding: 0 15px 5px;
      }

      .password {
        width: 80%;
        display: flex;
        align-items: center;
        margin: 0 10px;
        padding: 0 15px 5px;
      }

      .user,
      .password {
        :deep(.el-input__wrapper) {
          box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
          cursor: default;
        }
      }
    }

    /deep/ .el-input__wrapper {
      background-color: rgba(0, 0, 0, 0);
    }

    /deep/ .el-input--large .el-input__inner {
      color: #fff;
    }

    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #00cccc;
      border-color: #00cccc;
    }

    /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
      color: #00cccc !important;
    }

    .user-box {
      width: 100%;
      display: flex;
      align-items: center;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid #7f7f7f;
      height: 48px;
      .user-icon {
        width: 30px;
        height: 30px;
        padding: 5px;
        margin-left: 3%;

        .login-uimage {
          height: 100%;
          padding-right: 10px;
          border-right: 1px solid rgba(127, 127, 127, 1);
        }

        .login-pimage {
          height: 100%;
          padding-right: 10px;
          border-right: 1px solid rgba(127, 127, 127, 1);
        }
      }
    }

    .login-btn {
      width: 80%;
      height: 50px;
      line-height: 50px;
      margin: 30px auto;
      border-radius: 20px;
      color: #fff;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      background-color: rgba(0, 204, 204, 1);
      cursor: pointer;
    }
  }
  /deep/ .el-input__inner {
    -webkit-text-fill-color: #ffffff !important;
  }
  :-webkit-autofill,
  :-webkit-autofill:hover,
  :-webkit-autofill:focus,
  :-webkit-autofill:active {
    // 回填文字颜色设置
    transition: background-color 5000s ease-in-out 0s;
  }
}
</style>
